<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_6w5nm2ts7zaor.css">
    <link rel="icon" type="image/x-icon" href="">
    <title>GeoHey|极海云</title>
    <style >
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    	#app {
		    width: 100%;
		    height: 100%;
            font-size: 14px;
		}
        .confirm-page{
            height: 100%;
            width: 100%;
            min-height: 350px;
            position: relative;
            overflow: hidden;
        }
        .footer-wrapper{
            width: 300px;
            margin: 0 auto;
            height: 10%;
            text-align: center;
            opacity:0.7;
            color: #303c46;
            letter-spacing: 0;
            line-height: 14px;
            position: relative;
            font-size: 12px;
        }
        .logo-wrapper{
	        width: 320px;
	        height: 35px;
	        margin: 0 auto;
	        margin-top: 5%;
	        position: relative;
	        text-align: center;


	        @media screen and (max-height: 1170px){
	            margin-top: 150px;
	        }
	        @media screen and (max-height: 970px){
	            margin-top: 100px
	        }
	        @media screen and (max-height: 800px){
	            margin-top: 60px;
	        }
	        @media screen and (max-height: 600px){
	            margin-top: 30px;
	        }
	    }
	    .logo-img{
            width: 218px;
            height: 35px;
        }
        .center-wrapper{
            width: 100%;
            position: relative;
            height: 85%;  
            margin: 0 auto;
        }
        .email-confirm-wrapper{
            height: 200px;
            width: 60%;
            min-width: 300px;
            margin: 0 auto;
            display: block;
        }    

        .email-confirm-content{
            padding: 16px;
            margin-top: 50px;
            background: #1D8CE0;
            height: 150px;
            color: #fff;
        }
        .email-confirm-text{
            height: 85px;
        }

	    .btn-wrapper{
	        margin: 0 auto;
            width: 85px;
	    }  
	    .btn-send-email{
	    	display: inline-block;
		    white-space: nowrap;
		    cursor: pointer;
		    background-color: #f7ba2a;
		    border: 1px solid #f7ba2a;
		    margin: 0;
		    border-radius: 4px;
		    padding: 0 12px;
		    height: 28px;
		    line-height: 26px;
		    color: #fff;
	    }
	    .btn-send-email:focus,
        .btn-send-email:hover {
            background: #f9c855;
            border-color: #f9c855;
            color: #fff;
        }

        .btn-send-email:active {
            background: #dea726;
            border-color: #dea726;
            color: #fff;
        }

    </style>
</head>

<body>
    <div id="app">
        <div class="confirm-page">
            <div class="center-wrapper" >
            	<div class="logo-wrapper">
	                <img class="logo-img" src="" alt="" >
	            </div>
                <div class="email-confirm-wrapper" >
	                <div class="email-confirm-content">
                        
                        {% if status == "valid" %}
                        <p class="email-confirm-text">恭喜，您的账户已成功激活！<span id="time">3</span>秒后将自动跳转到登录页面。如果未自动跳转，请点击下面按钮进入登录页面。</p>
                        <div class="btn-wrapper">
                            <button class="btn-send-email" type="warning" onclick="location.href ='/sign'">立即登录</button>
                        </div>
                        {% elseif status == "invalid" %}
                        <p class="email-confirm-text">激活失败，您的激活链接错误或失效，请重新发送激活邮件，<span id="time">3</span>秒后将自动跳转到登录页面。如果未自动跳转，请点击下面按钮返前往登录页面。</p>
                        <div class="btn-wrapper">
                            <button class="btn-send-email" type="warning" onclick="location.href ='/sign'">登录</button>
                        </div>
                        {% elseif status == "fail" %}
                        <p class="email-confirm-text">激活失败，请重新发送激活邮件，<span id="time">3</span>秒后将自动跳转到登录页面。如果未自动跳转，请点击下面按钮返前往登录页面。</p>
                        <div class="btn-wrapper">
                            <button class="btn-send-email" type="warning" onclick="location.href ='/sign'">登录</button>
                        </div>
                        {% endif %}
	                </div>
	            </div>
            </div> 
            
            <div class="footer-wrapper">
                    版权所有©GeoHey.com
            </div>
        </div>
    </div>
    <script>
        window.onload = function(){
            var t = 3;
            setInterval(refer,1000);
            function refer(){
                if(t === 0){
                    location.href = '/sign';
                }
                document.getElementById('time').innerHTML = t;
                t--;
            }

            window[ 'page' ] = JSON.parse('{{page}}'.replace(/&quot;/g,'"'));
            
            if(window[ 'page'] && window[ 'page' ].title && window[ 'page' ].title!==''){
                document.title = window[ 'page' ].title;
            }
            if(window[ 'page'] && window[ 'page' ].login_logo && window[ 'page' ].login_logo!==''){
                document.querySelector('.logo-img').setAttribute("src",window[ 'page' ].login_logo);
            }
            if(window[ 'page' ] && window[ 'page' ].icon && window[ 'page' ].icon!==''){
                document.querySelector('[rel=icon]').setAttribute('href', window[ 'page' ].icon);
            }
    </script>
</body>
</html>